@charset "UTF-8";
/**
 * Created by kroyo on 2017/10/19.
 * minxin 公共块
 */
.fu-moive {
  position: absolute;
  top: -450px;
  right: 0;
  overflow: hidden;
  width: 510px;
  height: auto;
  background-color: #ffffff;
  background-size: 100% 100%;
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 30px 40px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 30px 40px rgba(0, 0, 0, 0.3);
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.3);
  -webkit-transform: translate3d(0, -2px, 0);
  -moz-transform: translate3d(0, -2px, 0);
  -ms-transform: translate3d(0, -2px, 0);
  -o-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
  z-index: 9; }
  .fu-moive .lpcn {
    height: 120px;
    font-size: 30px;
    background: #399bff;
    color: #fff;
    font-weight: 100;
    padding: 20px 0px 20px 80px; }
  .fu-moive .movie {
    position: relative;
    width: 490px;
    height: 234px;
    text-align: center;
    margin: 10px auto; }
  .fu-moive .player-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    background: url(../img/player-btn.png) no-repeat center;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer; }
  .fu-moive .btnlist {
    width: 490px;
    margin: 0 auto 10px;
    font-size: 0; }
  .fu-moive button, .fu-moive .btn-usercenter, .fu-moive .btn-pwork {
    width: 241px;
    height: 64px;
    font-size: 0; }
  .fu-moive .btn-publish {
    margin-right: 8px;
    background: url(../img/btn-publish.png) no-repeat center center; }
  .fu-moive .btn-join {
    background: url(../img/btn-join.png) no-repeat center center; }
  .fu-moive .btn-pwork {
    float: left;
    background: url(../img/btn-pwork-s.png) no-repeat center center; }
  .fu-moive .btn-usercenter {
    float: right;
    background: url(../img/btn-usercenter.png) no-repeat center center; }
  .fu-moive .btn-usercenter, .fu-moive .btn-pwork {
    display: none;
    margin-bottom: 8px;
    cursor: pointer; }
    .fu-moive .btn-usercenter a, .fu-moive .btn-pwork a {
      display: block;
      width: 100%;
      height: 100%; }

.fulist {
  width: 100%;
  height: 430px;
  background-color: #080808; }
  .fulist #container {
    position: relative; }
  .fulist .swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2; }
    .fulist .swiper-container .swiper-slide a {
      display: block;
      width: 100%;
      position: absolute;
      left: 50%;
      margin-left: -960px; }
    .fulist .swiper-container .swiper-slide img {
      display: block;
      height: 430px;
      width: 1920px;
      margin: 0 auto;
      background: #000000;
      vertical-align: middle; }
  .fulist .fu-control {
    display: none;
    z-index: 6; }

.tagbox {
  width: 100%;
  height: 410px;
  padding-top: 20px;
  background-color: #545454; }
  .tagbox #container {
    position: relative; }
  .tagbox .flowlist {
    position: relative; }
    .tagbox .flowlist ul {
      position: relative;
      padding: 92px 0px 134px 25px; }
    .tagbox .flowlist li {
      position: relative;
      float: left;
      width: 179px;
      height: 65px;
      line-height: 62px;
      color: #fff;
      margin-right: 29px; }
      .tagbox .flowlist li::after {
        position: absolute;
        top: 26px;
        left: 186px;
        content: '';
        display: block;
        width: 14px;
        height: 11px;
        background: url(../img/flow-arrow.png) no-repeat; }
      .tagbox .flowlist li:last-of-type::after {
        display: none; }
    .tagbox .flowlist .flow-show {
      width: 100%;
      height: 100%;
      border: 1px solid #fff;
      border-radius: 32px;
      color: #fff;
      text-align: center;
      background-color: transparent;
      -webkit-transition: 1s all;
      -moz-transition: 1s all;
      -ms-transition: 1s all;
      -o-transition: 1s all;
      transition: 1s all; }
    .tagbox .flowlist span {
      vertical-align: -5px;
      margin-right: 15px; }
    .tagbox .flowlist .flow-down {
      position: absolute;
      top: 0;
      width: 100%;
      border-radius: 0 0 32px 32px;
      padding-bottom: 5px;
      background-color: #198afe;
      opacity: 0;
      z-index: 9;
      -webkit-transition: 1.2s all;
      -moz-transition: 1.2s all;
      -ms-transition: 1.2s all;
      -o-transition: 1.2s all;
      transition: 1.2s all; }
    .tagbox .flowlist .text-left p {
      text-align: left;
      padding-left: 30px; }
    .tagbox .flowlist .text-padding p {
      padding-left: 15px; }
    .tagbox .flowlist p {
      width: 100%;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      text-align: center; }
    .tagbox .flowlist .flow-end:hover .flow-show,
    .tagbox .flowlist li:hover .flow-show, .tagbox .flowlist .active .flow-show {
      background-color: #198afe;
      border-radius: 32px 32px 0 0;
      border: none; }
    .tagbox .flowlist .flow-end:hover .flow-down,
    .tagbox .flowlist li:hover .flow-down, .tagbox .flowlist .active .flow-down {
      opacity: 1;
      top: 100%; }
    .tagbox .flowlist .flow-center {
      width: 230px; }
      .tagbox .flowlist .flow-center::after {
        left: 238px; }
    .tagbox .flowlist .flow-end {
      position: absolute;
      right: 27px;
      width: 179px;
      height: 65px;
      line-height: 62px;
      color: #fff; }
      .tagbox .flowlist .flow-end:after {
        position: absolute;
        left: -44px;
        content: '';
        display: block;
        width: 14px;
        height: 11px;
        background: url(../img/flow-arrow.png) no-repeat; }
    .tagbox .flowlist .flow-end-bottom {
      top: 160px; }
      .tagbox .flowlist .flow-end-bottom::after {
        top: -10px;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg); }
    .tagbox .flowlist .flow-end-top {
      top: 25px; }
      .tagbox .flowlist .flow-end-top::after {
        top: 65px;
        -webkit-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg); }
  .tagbox .swiper-con {
    width: 100%;
    height: 80px;
    overflow: hidden; }
  .tagbox .taglist li {
    float: left;
    margin-right: 24px; }
    .tagbox .taglist li:last-of-type {
      margin-right: 0; }
  .tagbox .taglist .tag-wrap {
    position: relative;
    width: 323px;
    height: 56px;
    border-radius: 5px;
    background-color: #fafafa; }
  .tagbox .taglist p {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 18px; }
  .tagbox .taglist .icon-wrap {
    float: left;
    width: 80px;
    height: 100%;
    line-height: 54px;
    background: #f5f5f5;
    text-align: center;
    border-radius: 5px 0px 0px 5px; }
    .tagbox .taglist .icon-wrap img {
      width: 26px;
      height: 26px;
      vertical-align: middle; }
  .tagbox .taglist .tag-info {
    padding-top: 8px;
    overflow: hidden; }
  .tagbox .taglist .tag-name {
    font-size: 18px;
    color: #000; }
  .tagbox .taglist .time {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #b5b5b5;
    font-size: 16px; }
  .tagbox .taglist .tag-state {
    font-size: 14px;
    color: #999999; }

/**/
.total-num {
  float: right;
  width: 323px;
  height: 46px;
  line-height: 44px;
  background-color: #399bff;
  border-radius: 5px;
  font-size: 14px;
  text-align: center; }
  .total-num span {
    color: #8bdcff;
    padding: 0px 17px; }
  .total-num i {
    color: #fefefe; }

.partner {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0px 60px; }
  .partner .par-title {
    font-size: 40px;
    font-weight: 100;
    color: #414141; }
  .partner .par-list {
    width: 100%;
    overflow: hidden; }
    .partner .par-list li {
      position: relative;
      float: left;
      margin-top: 70px;
      margin-right: 60px; }
    .partner .par-list .par-img {
      width: 170px;
      height: 95px;
      line-height: 95px;
      overflow: hidden;
      text-align: center;
      background-color: #ffffff;
      -webkit-transition: .5s all;
      -moz-transition: .5s all;
      -ms-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .partner .par-list .par-img img {
        height: 70px;
        vertical-align: middle;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-filter: gray;
        filter: gray; }
    .partner .par-list .par-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 256px;
      height: 93px;
      background-color: #399bff;
      color: #fff;
      padding: 20px 12px;
      text-align: center;
      opacity: 0;
      -webkit-transition: 1s all;
      -moz-transition: 1s all;
      -ms-transition: 1s all;
      -o-transition: 1s all;
      transition: 1s all;
      z-index: 9;
      line-height: 30px; }
      .partner .par-list .par-text h4 {
        font-size: 18px;
        font-weight: 400; }
      .partner .par-list .par-text p {
        font-size: 15px; }
    .partner .par-list li:hover .par-text {
      left: 170px;
      opacity: 1; }
    .partner .par-list li:hover .par-img {
      -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
      -webkit-transform: translate3d(0, -3px, 0);
      -moz-transform: translate3d(0, -3px, 0);
      -ms-transform: translate3d(0, -3px, 0);
      -o-transform: translate3d(0, -3px, 0);
      transform: translate3d(0, -3px, 0); }
      .partner .par-list li:hover .par-img img {
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none; }
    .partner .par-list li:nth-of-type(6n) {
      margin-right: 0; }
      .partner .par-list li:nth-of-type(6n):hover .par-text {
        left: -256px;
        opacity: 1; }

.team {
  width: 100%;
  height: 900px;
  background: url(../img/team-bg.jpg) no-repeat center;
  background-size: 100% 100%; }
  .team .team-title {
    line-height: 200px;
    font-size: 40px;
    font-weight: 100;
    text-align: center;
    color: #fff; }
  .team .prot {
    position: relative; }
    .team .prot .team-ceo {
      float: left;
      width: 540px;
      height: 520px;
      overflow: hidden;
      border: 1px solid #C3C3C4;
      background: #FFFFFF;
      text-align: center;
      padding-top: 35px; }
      .team .prot .team-ceo div {
        margin-top: 20px; }
      .team .prot .team-ceo p {
        text-align: left;
        font-weight: 100;
        margin-left: 40px;
        color: #0e050b; }
        .team .prot .team-ceo p:first-of-type {
          font-size: 30px; }
        .team .prot .team-ceo p:last-of-type {
          margin-top: 10px;
          font-size: 12px; }
    .team .prot .team-list .margin-top40, .team .prot .team-list li:nth-of-type(4), .team .prot .team-list li:nth-of-type(5), .team .prot .team-list li:nth-of-type(6) {
      margin-top: 40px; }
    .team .prot .team-list li {
      position: relative;
      float: left;
      width: 240px;
      height: 240px;
      overflow: hidden;
      margin-left: 35px; }
      .team .prot .team-list li img {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      .team .prot .team-list li .team-img-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      .team .prot .team-list li .name,
      .team .prot .team-list li .post {
        font-size: 12px;
        text-align: center;
        position: absolute;
        bottom: 10px;
        color: #D8D8D8;
        padding: 8px 10px;
        background: rgba(0, 0, 0, 0.3); }
      .team .prot .team-list li .name {
        left: 8px; }
      .team .prot .team-list li .post {
        right: 8px; }
      .team .prot .team-list li .team-info {
        position: absolute;
        top: 100%;
        width: 100%;
        height: 100%;
        background: rgba(77, 160, 245, 0.8);
        color: #ddebff;
        padding: 15px 20px 20px;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        -webkit-line-clamp: 10;
        -webkit-transition: 1s all;
        -moz-transition: 1s all;
        -ms-transition: 1s all;
        -o-transition: 1s all;
        transition: 1s all;
        font-size: 14px; }
      .team .prot .team-list li:hover .team-info {
        top: 0; }
    .team .prot .team-list .team-control {
      width: 690px;
      margin: 40px auto;
      text-align: center; }
      .team .prot .team-list .team-control .swiper-pagination-bullet {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 0 10px;
        background: #fff;
        opacity: 0.2;
        cursor: pointer;
        -webkit-transition: .3s all;
        -moz-transition: .3s all;
        -ms-transition: .3s all;
        -o-transition: .3s all;
        transition: .3s all; }
      .team .prot .team-list .team-control .swiper-pagination-bullet-active,
      .team .prot .team-list .team-control span:hover {
        opacity: 1; }
    .team .prot .team-list .swiper-pagination {
      position: initial; }
    .team .prot .team-list .team-count {
      position: absolute;
      right: 0;
      bottom: -40px;
      width: 70px;
      height: 70px;
      font-size: 35px;
      color: #fff; }
      .team .prot .team-list .team-count span {
        position: absolute;
        font-weight: 100; }
      .team .prot .team-list .team-count .count {
        top: -13px;
        left: -30px; }
      .team .prot .team-list .team-count .per1 {
        left: -15px; }
      .team .prot .team-list .team-count .per2 {
        top: 5px; }

/**经典案例**/
.classic-case {
  background: #f5f5f5;
  padding: 50px 0px; }
  .classic-case .case-title {
    width: 200px;
    font-size: 40px;
    font-weight: 100;
    padding-bottom: 10px;
    letter-spacing: 10px;
    text-align: left;
    border-bottom: 10px solid #399BFC; }
    .classic-case .case-title a {
      color: #000000; }
      .classic-case .case-title a:hover {
        color: #1E87F2; }
  .classic-case .case-swiper-left {
    width: 600px;
    height: 520px;
    overflow: hidden; }
    .classic-case .case-swiper-left .swiper-slide {
      background-color: #f5f5f5; }
  .classic-case .case-left {
    margin-right: 45px; }
    .classic-case .case-left .case-text {
      height: 160px; }
    .classic-case .case-left .case-class {
      font-size: 30px;
      margin: 60px 0px 10px; }
    .classic-case .case-left p {
      width: 515px;
      font-size: 16px;
      line-height: 30px; }
    .classic-case .case-left .img-wrap {
      width: 600px;
      height: 270px;
      margin-top: 20px;
      overflow: hidden; }
      .classic-case .case-left .img-wrap img {
        width: 100%; }
    .classic-case .case-left .case-more {
      width: 155px;
      height: 65px;
      background: #399bff;
      margin-top: 58px;
      line-height: 65px;
      text-align: center; }
      .classic-case .case-left .case-more a {
        display: block;
        width: 100%;
        height: 100%;
        color: #ffffff; }
  .classic-case .case-right {
    overflow: hidden; }
    .classic-case .case-right div {
      float: left;
      width: 320px;
      height: 300px;
      text-align: center;
      margin: 20px 0px 20px 40px;
      -webkit-transition: .5s all;
      -moz-transition: .5s all;
      -ms-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .classic-case .case-right div img {
        width: 100%;
        height: 100%;
        vertical-align: middle; }
      .classic-case .case-right div:hover {
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        -webkit-transform: translate3d(0, -2px, 0);
        -moz-transform: translate3d(0, -2px, 0);
        -ms-transform: translate3d(0, -2px, 0);
        -o-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0); }

/**设计库**/
.design-library {
  padding: 70px 0px 105px; }
  .design-library .design-title {
    font-size: 0; }
    .design-library .design-title h2,
    .design-library .design-title p {
      display: inline-block; }
    .design-library .design-title h2 {
      font-size: 40px;
      font-weight: 100; }
    .design-library .design-title p {
      margin-left: 15px;
      font-size: 20px;
      letter-spacing: 5px; }
    .design-library .design-title span {
      color: red; }
    .design-library .design-title a {
      color: #000000;
      padding-bottom: 8px;
      border-bottom: 10px solid #399BFC; }
      .design-library .design-title a:hover {
        color: #1E87F2; }
  .design-library .design-list {
    margin-top: 60px;
    overflow: hidden; }
    .design-library .design-list li {
      float: left;
      width: 328px;
      margin-right: 18px; }
      .design-library .design-list li:last-of-type {
        margin-right: 0px; }
    .design-library .design-list div {
      position: relative;
      width: 100%;
      margin-bottom: 18px;
      font-size: 0;
      -webkit-transition: .5s all;
      -moz-transition: .5s all;
      -ms-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .design-library .design-list div:hover {
        -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
        -webkit-transform: translate3d(0, -2px, 0);
        -moz-transform: translate3d(0, -2px, 0);
        -ms-transform: translate3d(0, -2px, 0);
        -o-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0); }
      .design-library .design-list div a {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center; }
      .design-library .design-list div img {
        width: 100%;
        height: 100%;
        vertical-align: middle; }
    .design-library .design-list span {
      position: absolute;
      bottom: 15px;
      left: 12px;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 16px;
      padding: 4px 20px 6px; }
    .design-library .design-list .div432 {
      height: 432px; }
    .design-library .design-list .div222 {
      height: 222px; }
    .design-library .design-list .div338 {
      height: 338px; }
    .design-library .design-list .div316 {
      height: 316px; }
    .design-library .design-list .div212 {
      height: 212px; }

#video-wrap {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199; }
  #video-wrap #container {
    position: relative; }
  #video-wrap .video-player {
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 0; }
  #video-wrap .player-shut {
    display: none;
    position: absolute;
    top: 0px;
    right: 50px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url(../img/close-active.png) no-repeat center; }

/**平板>768px , <1024px**/
@media only screen and (max-width: 1024px) {
  .fu-moive {
    width: 350px;
    margin-bottom: 1%;
    top: -314px; }
    .fu-moive .lpcn {
      width: 100%;
      height: auto;
      font-size: 22px;
      padding: 10px 20px;
      line-height: 30px; }
    .fu-moive .movie {
      width: 334px;
      height: auto;
      margin: 8px 8px 0; }
    .fu-moive .btnlist {
      width: 100%;
      padding: 0 8px;
      margin: 0 auto 58px; }
    .fu-moive button, .fu-moive .btn-usercenter, .fu-moive .btn-pwork {
      position: absolute;
      bottom: -8.5%;
      width: 47%;
      height: auto;
      padding: 15.8% 0; }
    .fu-moive img {
      width: 100%;
      vertical-align: middle; }
    .fu-moive .btn-join,
    .fu-moive .btn-publish, .fu-moive .btn-pwork, .fu-moive .btn-usercenter {
      background-size: 100%; }
    .fu-moive .btn-join, .fu-moive .btn-usercenter {
      float: right;
      right: 2%; }
    .fu-moive .btn-publish, .fu-moive .btn-pwork {
      margin-right: 0; }
    .fu-moive .btn-pwork, .fu-moive .btn-usercenter {
      padding: 13.5% 0; }
  .fulist {
    height: 295px;
    background: transparent; }
    .fulist .swiper-container .swiper-slide a {
      position: initial;
      height: 100%;
      margin-left: 0;
      text-align: center;
      overflow: hidden; }
    .fulist .swiper-container .swiper-slide img {
      display: inline-block;
      max-height: 100%;
      width: auto;
      position: absolute;
      left: 76%;
      background: none;
      vertical-align: middle; }
  /*来设计流程*/
  .tagbox {
    height: auto;
    /**流程图*/
    /**产品列表*/ }
    .tagbox .flowlist {
      padding: 0px 35px;
      max-width: 800px;
      margin: 0 auto; }
      .tagbox .flowlist ul {
        padding: 30px 0px 0px; }
      .tagbox .flowlist li {
        margin-top: 53px;
        margin-right: 5%; }
      .tagbox .flowlist li:nth-of-type(4) {
        position: absolute;
        top: 150px;
        left: 0; }
      .tagbox .flowlist li:last-of-type {
        position: absolute;
        top: 150px;
        left: 30.5%; }
      .tagbox .flowlist li::after {
        left: 106%; }
      .tagbox .flowlist .flow-end {
        left: 63%; }
      .tagbox .flowlist .flow-end-top {
        top: 155px; }
      .tagbox .flowlist .flow-end-bottom {
        top: 255px; }
    .tagbox .swiper-con {
      height: 180px;
      margin: 230px 0px 0px;
      padding: 0px 35px; }
    .tagbox .taglist ul {
      max-width: 850px;
      margin: 0 auto; }
    .tagbox .taglist li {
      margin-bottom: 30px; }
    .tagbox .taglist li:nth-of-type(even) {
      float: right;
      margin-right: 0; }
  /*需求总数*/
  .total-num {
    margin-right: 35px; }
  .partner {
    padding-bottom: 40px; }
    .partner .par-title {
      width: 100%;
      text-align: center; }
    .partner .par-list {
      padding: 0px 35px; }
      .partner .par-list li {
        margin-top: 40px;
        margin-right: calc((100% - 680px)/3); }
      .partner .par-list li:nth-of-type(6n) {
        margin-right: calc((100% - 680px)/3); }
      .partner .par-list li:nth-of-type(4n) {
        margin-right: 0px;
        float: right; }
      .partner .par-list .par-text {
        width: 100%;
        padding: 20px 0; }
        .partner .par-list .par-text h4 {
          font-size: 16px; }
        .partner .par-list .par-text p {
          font-size: 12px; }
      .partner .par-list li:nth-of-type(6n):hover .par-text {
        left: 100%; }
      .partner .par-list li:nth-of-type(4n):hover .par-text {
        left: -100%; }
  .team {
    height: auto;
    background-size: cover; }
    .team .team-title {
      line-height: 150px; }
    .team .prot .team-ceo {
      float: none;
      margin: 0 auto; }
    .team .prot ul {
      width: auto;
      padding: 40px 3% 0; }
    .team .prot .team-list li {
      margin-left: 0;
      margin-right: calc((100% - 720px)/2); }
    .team .prot .team-list li:nth-of-type(3n) {
      float: right;
      margin-right: 0; }
    .team .prot .team-list .team-control {
      margin: 40px auto 0;
      padding-bottom: 40px; }
    .team .prot .team-list .team-count {
      bottom: 10px; }
  .classic-case .case-title {
    margin: 0 auto;
    text-align: center; }
  .classic-case .case-swiper-left {
    width: 100%;
    height: auto;
    overflow: hidden; }
    .classic-case .case-swiper-left .swiper-container {
      position: relative; }
  .classic-case .case-left {
    position: relative;
    float: none;
    margin-right: 35px;
    margin-top: 40px; }
    .classic-case .case-left .case-text {
      width: 45%;
      float: left;
      padding-left: 35px; }
      .classic-case .case-left .case-text .case-left {
        margin-top: 0px; }
    .classic-case .case-left .case-class {
      margin-top: 0;
      font-size: 25px; }
    .classic-case .case-left .img-wrap {
      width: 50%;
      float: right;
      margin-top: 0; }
    .classic-case .case-left p {
      width: 100%;
      font-size: 14px;
      line-height: 25px; }
    .classic-case .case-left .case-more {
      position: absolute;
      left: 35px;
      bottom: 10px;
      width: 140px;
      height: 50px;
      line-height: 50px;
      z-index: 9; }
  .classic-case .case-right {
    padding: 0px 30px;
    max-width: 840px;
    margin: 0 auto; }
    .classic-case .case-right div {
      margin: 20px 0px 30px; }
    .classic-case .case-right div:nth-of-type(even) {
      float: right; }
    .classic-case .case-right div:nth-of-type(odd) {
      margin-right: 30px; }
  .design-library {
    padding: 50px 0 30px; }
    .design-library .design-title {
      text-align: center; }
    .design-library ul {
      padding: 0 35px;
      max-width: 850px;
      margin: 0 auto; }
    .design-library li:nth-of-type(even) {
      float: right; }
    .design-library .design-list li {
      margin-right: 0px;
      margin-bottom: 30px; }
  #web {
    min-width: inherit; }
  #container {
    width: 100%; }
  .nav .navlist {
    width: 60px;
    height: 60px; }
    .nav .navlist .navicon {
      display: block; }
    .nav .navlist ul {
      height: 0;
      position: absolute;
      top: 100%;
      left: 22%;
      -webkit-transition: 1s all;
      transition: 1s all;
      z-index: 9; }
    .nav .navlist li {
      float: none;
      width: 80px;
      height: 50px;
      padding: 0 15px;
      background-color: #080808; }
      .nav .navlist li a {
        padding: 0; }
    .nav .navlist li:hover {
      background-color: gray;
      color: #fff; }
    .nav .navlist a::after {
      display: none; }
  .nav .navlogin {
    float: right;
    width: 350px; }
    .nav .navlogin .user-login {
      width: 50px; }
    .nav .navlogin .select-main {
      width: 95px; }
      .nav .navlogin .select-main .select-block {
        width: 100%; }
      .nav .navlogin .select-main .select-items {
        padding-left: 15px; }
    .nav .navlogin .search {
      width: calc(100% - 95px);
      font-size: 12px; }
    .nav .navlogin form {
      float: none;
      width: calc(100% - 50px); }
    .nav .navlogin.active form {
      width: calc(100% - 110px); }
    .nav .navlogin .a-login {
      width: 110px; }
      .nav .navlogin .a-login .user-name {
        width: 40px;
        font-size: 12px;
        margin: 0 5px 0 7px; }
  .nav .navlogin.active .search {
    width: calc(100% - 95px); }
  .scrollNav .logo {
    display: none; }
  .scrollNav .navlist {
    width: 80px;
    height: 60px;
    margin-left: 0px; }
    .scrollNav .navlist .navicon {
      width: 100%; }
    .scrollNav .navlist ul {
      left: 0; }
    .scrollNav .navlist li {
      height: 40px;
      line-height: 40px;
      padding: 0; }
  .scrollNav .navlogin, .scrollNav .navlogin.active {
    width: auto; }
    .scrollNav .navlogin form, .scrollNav .navlogin.active form {
      width: auto; }
  .footer {
    height: auto; }
    .footer .about-list dl,
    .footer .help-list dl, .footer .flink dl {
      padding: 0 50px; }
    .footer .con-address {
      height: 150px;
      margin-left: 35px; }
      .footer .con-address .tel {
        margin: 15px 0px 20px; }
    .footer .official {
      position: absolute;
      top: 60px;
      right: 35px; }
      .footer .official > div {
        display: inline-block;
        margin-right: 0px; }
        .footer .official > div:first-of-type {
          margin-right: 7%; }
  #postdemand .postdemand-show {
    width: 100%; }
  #service .service-show {
    width: 100%; } }

/**手机端<768px**/
@media only screen and (max-width: 767px) {
  .fu-moive {
    position: initial;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 2%; }
    .fu-moive .lpcn {
      height: auto;
      font-size: 20px; }
    .fu-moive .btnlist {
      margin: 2% 0 0; }
    .fu-moive button, .fu-moive .btn-usercenter, .fu-moive .btn-pwork {
      width: 49%;
      position: initial;
      padding: 7% 0; }
    .fu-moive .movie {
      width: calc(100% - 16px); }
    .fu-moive .btn-usercenter, .fu-moive .btn-pwork {
      margin-bottom: 0; }
  /**轮播图**/
  .fulist {
    height: 110px; }
    .fulist .swiper-container {
      width: 100%; }
      .fulist .swiper-container .swiper-slide {
        overflow: hidden; }
        .fulist .swiper-container .swiper-slide img {
          position: initial; }
  .tagbox {
    padding-top: 0; }
    .tagbox .flowlist {
      max-width: 350px;
      padding: 0 0 40px; }
      .tagbox .flowlist p {
        font-size: 12px; }
      .tagbox .flowlist .text-left p {
        padding-left: 40px; }
      .tagbox .flowlist .flow-end p {
        padding-left: 35px; }
      .tagbox .flowlist .text-padding p {
        padding-left: 10%; }
      .tagbox .flowlist ul {
        padding-top: 5px; }
      .tagbox .flowlist li {
        float: none;
        margin: 40px auto; }
      .tagbox .flowlist li::after {
        top: 79px;
        left: 50%;
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg); }
      .tagbox .flowlist li.flow-center::after {
        left: 50%; }
      .tagbox .flowlist li:nth-of-type(4) {
        position: relative;
        top: 0; }
      .tagbox .flowlist li:last-of-type {
        position: relative;
        top: 0;
        left: 0; }
      .tagbox .flowlist .flow-end {
        position: relative;
        top: 0;
        left: 5px;
        display: inline-block;
        width: 48%;
        height: auto; }
      .tagbox .flowlist .flow-end-bottom {
        right: 0; }
      .tagbox .flowlist .flow-end::after {
        left: 50%; }
      .tagbox .flowlist .flow-end-top::after {
        top: -23px;
        -webkit-transform: rotateZ(135deg);
        transform: rotateZ(135deg); }
      .tagbox .flowlist .flow-end-bottom::after {
        top: -23px;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg); }
    .tagbox .swiper-con {
      height: 340px;
      margin: 0;
      padding: 0; }
    .tagbox .taglist ul {
      padding: 0 7%; }
    .tagbox .taglist li {
      width: 100%;
      margin-right: 0; }
    .tagbox .taglist li:nth-of-type(even) {
      float: left; }
    .tagbox .taglist .tag-wrap {
      width: 100%; }
  .total-num {
    width: 100%;
    margin-right: 0; }
  .partner {
    padding: 12px 0; }
    .partner .par-title {
      font-size: 30px;
      margin-bottom: 10px; }
    .partner .par-list {
      max-width: 465px;
      margin: 0 auto;
      padding: 0 7%; }
      .partner .par-list li {
        width: 48.5%;
        max-width: 170px;
        margin: 10px 0;
        text-align: center; }
        .partner .par-list li img {
          width: 100%;
          vertical-align: middle; }
      .partner .par-list li:nth-of-type(odd) {
        margin-right: 3%; }
      .partner .par-list li:nth-of-type(even) {
        float: right; }
      .partner .par-list li:nth-of-type(6n) {
        margin-right: 0; }
      .partner .par-list .par-img {
        width: 100%;
        height: auto;
        line-height: initial;
        padding: 3% 4%; }
        .partner .par-list .par-img img {
          max-width: 80%;
          height: auto; }
      .partner .par-list .par-text {
        width: 100%;
        height: 100%;
        font-size: 10px;
        padding: 6% 4%; }
        .partner .par-list .par-text h4, .partner .par-list .par-text p {
          height: 50%; }
        .partner .par-list .par-text h4 {
          font-size: 12px; }
        .partner .par-list .par-text p {
          font-size: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
      .partner .par-list li:hover .par-text {
        left: 100%; }
      .partner .par-list li:nth-of-type(2n):hover .par-text {
        left: -100%; }
    .partner .margin2 {
      margin-right: 2%; }
  .team .team-title {
    line-height: 100px;
    font-size: 35px; }
  .team .prot .team-ceo {
    width: auto;
    height: auto;
    padding: 20px 15px 0; }
    .team .prot .team-ceo img {
      width: 100%; }
    .team .prot .team-ceo p {
      margin-left: 0; }
    .team .prot .team-ceo div {
      margin-bottom: 20px; }
  .team .prot ul {
    padding: 40px 15px 0; }
  .team .prot .team-list .margin-top40, .team .prot .team-list li:nth-of-type(4), .team .prot .team-list li:nth-of-type(5), .team .prot .team-list li:last-of-type {
    margin-top: 0; }
  .team .prot .team-list li {
    width: 48.5%;
    height: auto;
    margin: 0 0 15px 0;
    overflow: hidden; }
    .team .prot .team-list li .team-img-wrap {
      height: auto;
      text-align: center; }
      .team .prot .team-list li .team-img-wrap img {
        width: 100%;
        vertical-align: middle; }
    .team .prot .team-list li .name,
    .team .prot .team-list li .post {
      font-size: 10px;
      padding: 3% 4%; }
    .team .prot .team-list li .name {
      left: 5%; }
    .team .prot .team-list li .team-info {
      font-size: 12px;
      line-height: 18px;
      padding: 6%; }
  .team .prot .team-list li:nth-of-type(3n) {
    float: left; }
  .team .prot .team-list li:nth-of-type(odd) {
    margin-right: 3%; }
  .team .prot .team-list .team-control {
    width: auto;
    margin-top: 20px;
    padding-bottom: 30px; }
  .team .prot .team-list .team-count {
    right: -30px;
    bottom: 0; }
  .classic-case {
    padding: 30px 0; }
    .classic-case .case-title {
      font-size: 35px; }
    .classic-case .case-swiper-left {
      overflow: hidden; }
      .classic-case .case-swiper-left .swiper-slide {
        height: 100%; }
    .classic-case .case-left {
      margin-top: 10px;
      margin-right: 0;
      padding: 0 15px; }
      .classic-case .case-left .case-text,
      .classic-case .case-left .img-wrap {
        width: 100%; }
      .classic-case .case-left .case-text {
        padding-left: 0;
        height: auto;
        margin-bottom: 25px; }
        .classic-case .case-left .case-text .case-class {
          font-size: 20px;
          margin-top: 25px; }
        .classic-case .case-left .case-text p {
          font-size: 12px;
          line-height: 20px; }
      .classic-case .case-left .img-wrap {
        height: auto;
        margin-top: 0px;
        margin-bottom: 60px; }
      .classic-case .case-left p {
        line-height: 25px; }
      .classic-case .case-left .case-more {
        width: 100%;
        height: 45px;
        line-height: 45px;
        left: 0;
        bottom: 6px;
        text-align: center;
        background: transparent;
        margin-top: 0;
        padding: 0 15px; }
        .classic-case .case-left .case-more a {
          float: right;
          width: 140px;
          height: 100%;
          background: #399bff; }
    .classic-case .case-right {
      padding: 0 15px; }
      .classic-case .case-right div {
        width: 48.5%;
        height: auto;
        margin: 20px 0 0; }
      .classic-case .case-right div:nth-of-type(even) {
        float: left; }
      .classic-case .case-right div:nth-of-type(odd) {
        margin-right: 3%; }
  .design-library {
    padding: 20px 0; }
    .design-library .design-title p {
      letter-spacing: 0; }
    .design-library ul {
      padding: 0 15px; }
    .design-library .design-list {
      margin-top: 30px; }
      .design-library .design-list li {
        float: left;
        width: 48.5%; }
      .design-library .design-list li:nth-of-type(odd) {
        margin-right: 3%; }
      .design-library .design-list .div222,
      .design-library .design-list .div212,
      .design-library .design-list .div316,
      .design-library .design-list .div338,
      .design-library .design-list .div432 {
        height: auto; }
      .design-library .design-list span {
        bottom: 10px;
        line-height: inherit;
        font-size: 14px;
        left: 5%;
        padding: 2% 4%; }
      .design-library .design-list div {
        margin-bottom: 6%; }
  #login-wrap .login {
    width: 320px;
    height: auto;
    padding: 20px;
    margin-top: 25%; }
  #login-wrap .login-title .title {
    font-size: 14px; }
  #login-wrap .login-title .login-close {
    font-size: 20px;
    top: 2px;
    right: 10px; }
  #login-wrap .login-form .login-type, #login-wrap .login-form .check-wrap, #login-wrap .login-form .login-name {
    margin-top: 15px;
    margin-bottom: 15px; }
  #login-wrap .login-form .ps-type button {
    width: 110px; }
  #login-wrap .login-form .loginbtn {
    margin-top: 0; }
  .nav {
    height: 50px;
    line-height: 50px; }
    .nav #container {
      height: 100%; }
    .nav .logo {
      display: none; }
    .nav .navlist {
      width: 40px;
      height: 100%; }
      .nav .navlist .navicon {
        float: left;
        width: 100%;
        font-size: 25px; }
      .nav .navlist ul {
        left: 1%;
        opacity: 0; }
    .nav .navlogin {
      width: calc(100% - 40px);
      height: 50px; }
      .nav .navlogin .select-mian,
      .nav .navlogin .search,
      .nav .navlogin .submit,
      .nav .navlogin .user-login {
        height: 50px; }
      .nav .navlogin .user-login {
        width: 50px;
        line-height: 50px; }
      .nav .navlogin .select-main {
        width: 40%;
        height: 50px; }
        .nav .navlogin .select-main .select-set {
          font-size: 10px; }
        .nav .navlogin .select-main .select-arrow {
          top: 20px;
          right: 10px; }
        .nav .navlogin .select-main .select-block {
          width: auto; }
        .nav .navlogin .select-main .select-items {
          padding-left: 12px;
          font-size: 10px;
          height: 35px;
          line-height: 40px; }
      .nav .navlogin .search {
        width: 60%;
        height: 50px;
        padding: 10px 40px 10px 10px;
        font-size: 12px; }
      .nav .navlogin form {
        float: none;
        position: relative;
        z-index: 9;
        height: 50px;
        margin-right: 50px; }
      .nav .navlogin.active form {
        width: calc(100% - 100px); }
      .nav .navlogin.active .search {
        width: 60%; }
      .nav .navlogin .submit {
        right: 4px; }
      .nav .navlogin .a-login {
        width: 100px;
        height: 50px;
        line-height: 50px; }
        .nav .navlogin .a-login .user-name {
          width: 40px;
          font-size: 12px;
          margin: 0 5px 0 7px; }
        .nav .navlogin .a-login .news, .nav .navlogin .a-login .btn-exit {
          margin: 15px 0; }
  .scrollNav {
    height: 50px;
    line-height: 50px; }
    .scrollNav #container {
      position: relative; }
    .scrollNav .navlist {
      width: 50px; }
      .scrollNav .navlist .navicon span {
        display: none; }
    .scrollNav .navlogin {
      width: auto; }
      .scrollNav .navlogin .btn-publish, .scrollNav .navlogin .btn-join {
        width: 65px;
        height: 30px;
        margin: 10px 5px; }
      .scrollNav .navlogin .user-login {
        line-height: 50px;
        font-size: 14px; }
      .scrollNav .navlogin form, .scrollNav .navlogin .select-main, .scrollNav .navlogin .search, .scrollNav .navlogin .submit {
        height: 50px; }
      .scrollNav .navlogin .search-form {
        display: none;
        position: absolute;
        top: 0;
        left: 50px; }
      .scrollNav .navlogin .select-main .select-arrow {
        right: 5px; }
      .scrollNav .navlogin .select-main .select-set {
        padding-right: 12px; }
      .scrollNav .navlogin .search {
        padding-right: 32px; }
  .footer {
    height: auto;
    padding: 30px 15px 0; }
    .footer .about-list {
      margin-left: -20px; }
    .footer .about-list,
    .footer .help-list, .footer .flink {
      width: calc(100% / 3); }
    .footer .about-list dl {
      padding: 0 calc((100% - 75px)/2); }
    .footer .help-list dl {
      padding: 0 calc((100% - 60px)/2); }
    .footer .flink {
      width: calc((100% / 3) + 20px); }
      .footer .flink dl {
        padding: 0 calc((100% - 105px)/2); }
    .footer .con-address {
      margin-top: 15px;
      margin-left: 0; }
      .footer .con-address p {
        font-size: 16px; }
      .footer .con-address .tel {
        margin: 0 0 15px 0; }
    .footer #container {
      position: relative; }
    .footer .official {
      position: absolute;
      top: 106%;
      right: 0px;
      width: 100%; }
      .footer .official > div {
        display: inline-block;
        margin-right: 0px; }
        .footer .official > div:first-of-type {
          margin-right: 7%; }
    .footer .copynight {
      height: 60px;
      line-height: 60px;
      margin-top: 160px;
      font-size: 10px; }
  .sub-menu {
    right: 5px;
    bottom: 50px;
    border-radius: 16px; }
    .sub-menu .menu-li {
      width: 35px;
      height: 30px; } }

/**解决文字在1366px下太贴边的问题**/
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  .classic-case {
    padding-left: 10px; }
  .design-library .design-title {
    padding-left: 10px; } }

@media only screen and (min-width: 1500px) {
  .fulist {
    position: relative; }
    .fulist .fu-control {
      height: 100%;
      display: block;
      position: absolute;
      top: 0; }
    .fulist .swiper-button-prev {
      left: calc((100% - 1366px)*0.25); }
    .fulist .swiper-button-next {
      right: calc((100% - 1366px)*0.25); } }
